<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML的innerText操作div和span</title>
    <style type="text/css">
        #div1 {
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            border: 1px black solid;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 获取对象
                var div1 = document.getElementById("div1")
                // 使用 innerHTML 属性获取元素内部的内容, (也可以设置)
                // ""中可以设置 HTML 代码, 会将代码显示
                // div1.innerHTML = "<font color='red'>显示内容</font>";
                // innerText 也可以获取内容, 但是只会将它当做文本处理
                div1.innerText = "<font color='red'>显示内容</font>";
            }
        }
    </script>
    <input type="button" value="设置div中的内容" id="btn"/>

    <div id="div1"></div>
</body>
</html>